<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<#include "../common/head.ftl">
<style>
    .imgList img.active {
        border: 1px solid #761c19;
    }

    .imgList img.speak {
        border: 1px solid #006621;
    }

    .content div {
        padding: 5px;
        font-size: 16px;
    }

    .content div span {
        margin-right: 5px;
    }

    .content div span:nth-child(1) {
        font-family: 仿宋
    }

    .content div span:nth-child(3) {
        font-size: 12px;
        color: rebeccapurple;
    }

    .content div:nth-child(3n+0) span:first-child {
        color: green
    }

    .content div:nth-child(3n+1) span:first-child {
        color: darkmagenta
    }

    .content div:nth-child(3n+2) span:first-child {
        color: lightcoral
    }
</style>
<body>
<#include "../common/modal.ftl">

<#include "../common/entity.ftl">

<div class="header" style="border:1px solid #eee;height:40px;">
    <p class="pull-left" style="margin: 0;padding: 12px;">
        会议转录系统 <#--- <span class="enterpriseName">XX</span>企业会议管理系统--></p>
    <div class="pull-left" style="display: flex;align-items: center;height: 100%;">
        <div style="width:150px;text-align:center;"> ---<span class="meetingStatus">正在进行会议</span>---</div>
        <div class="switch" data-on="primary" data-off="danger" data-on-label="开始" data-off-label="结束">
            <input type="checkbox" checked/>
        </div>
        <div class="switch" data-on="primary" data-off="danger" data-on-label="暂停" data-off-label="继续">
            <input type="checkbox" checked/>
        </div>

        <div style="width:100px;text-align:center;"> ---<span>语言环境</span>---</div>
        <select class="form-control" name="language" style="width: auto;"> </select>
    </div>
    <p class="pull-right datetime" style="margin: 0;padding: 12px;"></p>
</div>


<div class="body" style="width:98%;margin:0 auto;height: 80%;position:  relative;">
    <div class="body-left" style="width: 20%;left: 0;text-align: center;position:  absolute;">
        <p style="color:#fff;margin: 0px;padding: 5px;text-align: left;background: #41C7DB;border: 1px solid #eee;">
            会议摘要</p>
        <textarea rows="10" style="width: 100%; margin: 0px;resize: none;height:200px;"
                  class="meetingAbstract"></textarea>
        <p style="cursor: pointer;background: #666666;color: #fff;height: 25px;line-height: 25px;">更新会议摘要</p>
    </div>
    <div class="body-center" style="width:60%;position: absolute;left:20%;">
        <h1 class="meetingTitle" style="text-align: center;font-weight:  bold;color: #000;"></h1>
        <div style="width:76%;height: 300px;overflow-y: auto;margin: 50px 12% 40px 12%;border: 2px solid #333;"
             class="content">

        </div>
        <div>
            <img class="selectParticipate" title="确定会议发言人" src="${basePath}/img/person1.png" class="img-circle"
                 style="border-radius:50%;cursor: pointer;float: left;width: 10%;margin: 0 1%;"/>
            <div class="imgList" style="float: left;width: 76%;overflow-x: auto;height:66px;text-align: center;">
            </div>
            <img class="addParticipate" title="添加会议参与人" src="${basePath}/img/person2.png"
                 style="cursor: pointer;float: left;width: 10%;margin: 0 1%;"/>
        </div>
    </div>
    <div class="body-right" style="width:20%;position: absolute;right: 0;">
        <p style="color:#fff;margin: 0px;padding: 5px;text-align: left;background: #41C7DB;border: 1px solid #eee;">
            会议转录系统 - 设备信息</p>
        <div style="text-align: left;padding-left: 15px;border: 1px solid #eee;">
            <p style="padding: 10px 0;margin: 0;">设备名称 ：<span class="deviceName"></span></p>
            <p style="padding: 10px 0;margin: 0;">设备ID ：<span class="deviceId"></span></p>
            <p style="padding: 10px 0;margin: 0;">设备状态 ：<span class="deviceStatus"></span></p>
        <#--<p style="padding: 10px 0;margin: 0;">网络状态 ：<span>版供电所</span></p>
        <p style="padding: 10px 0;margin: 0;">侦听状态 ：<span>版供电所</span></p>-->
        </div>
    </div>
</div>


<div class="footer" style="width:98%;margin:0 auto;position: fixed;bottom:0px;left:2%;">
    <p class="pull-left">
        <span class="enterpriseName"></span>公司
        地址：<span class="enterpriseAddress"></span>
        电话：<span class="phone"></span>
    </p>

    <p class="pull-right">Emlab 版权所有 Copyright 2018 www.emlab.net All rights reserved</p>
</div>
<script src="${basePath}/js/jquery.min.js?v=2.1.4"></script>
<script src="${basePath}/js/page.js"></script>
<script src="${basePath}/js/common.js"></script>
<script src="${basePath}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${basePath}/js/bootstrapSwitch.js"></script>
<script src="${basePath}/js/stomp.min.js"></script>
<script src="${basePath}/js/sockjs.min.js"></script>


<script type="text/javascript">

    AsyncGet("${basePath}/recorder/getLanguageList", null, function (value) {
        for (var i = 0; i < value.length; i++) {
            var option = $("<option></option>");
            $(option).attr("value", value[i].id);
            $(option).text(value[i].language);
            $("[name='language']").append(option);
        }
    })

    $("[name='language']").change(function () {
        AsyncPost("${basePath}/recorder/changeLanguage", {
            id:${meetingId},
            language: $("[name='language']").val()
        }, function (value) {

        })
    })

    getEnterpriseInfo();
    var startEnd = true;
    var pauseRestart = true;
    var meeting = getMeetingInfo();
    var device = getDeviceInfo();
    var startTime = new Date();
    var usernameArray = new Array();
    var discernUsername = "";
    var confirm = false;
    setInterval(function () {
        $(".datetime").text(getNowTime());
    }, 1000);
    var url = "${basePath}/stomp";
    var sock = new SockJS(url);
    var stomp = Stomp.over(sock);

    //连接stomp端点
    stomp.connect("guest", "guest", function (frame) {
        //订阅会议主题
        stomp.subscribe("/topic/meeting/" + meeting.id, function (value) {
            if ($(".imgList .speak").length > 0) {
                var div = $("<div></div>");
                var username = $("<span></span>");
                username.text($(".imgList .speak").attr("username") + "(" + discernUsername + "):");
                var content = $("<span></span>");
                content.text(value.body);
                var timeText = $("<span style='color:rebeccapurple'></span>");
                timeText.text(getNowTime(startTime));
                div.append(username).append(content).append(timeText);
                $(".content").append(div);
                scroll();
            }
        })

        //订阅设备主题
        stomp.subscribe("/topic/device/" + device.accessKey, function (value) {
            $(".deviceStatus").text(value.body);
        })
        //订阅change主题
        stomp.subscribe("/topic/change/" + meeting.id, function (value) {
            sentenceId = 0;
        })
        //订阅识别人主题
        stomp.subscribe("/topic/discern/" + meeting.id, function (value) {
            if (value.body != "") {
                discernUsername = value.body;
                if ($.inArray(discernUsername, usernameArray) == -1) {
                    confirm = false;
                } else {
                    confirm = true;
                    $(".imgList [username='" + discernUsername + "']").addClass("speak").siblings().removeClass("speak");
                }
            }
        })
        stomp.send("/topic/speaker/" + meeting.id, null, "test");
    })

    AsyncGet("${basePath}/recorder/getMeetingParticipators", {meetingId:${meetingId}}, function (value) {
        for (var i = 0; i < value.data.length; i++) {
            var img = $('<img  class="img-rounded" style="cursor: pointer;height:100%;"/>');
            img.attr("src", "${basePath}/function/getAvatar?avatar=" + value.data[i].avatar).attr("username", value.data[i].username).attr("title", value.data[i].username);
            usernameArray.push(value.data[i].username);
            $(".imgList").append(img);
        }
    })

    function getNowTime(date, weekShow) {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        if (month < 10) month = "0" + month;
        if (day < 10) day = "0" + day;
        if (h < 10) h = "0" + h;
        if (m < 10) m = "0" + m;
        if (s < 10) s = "0" + s;
        if (weekShow) {
            var day = date.getDay();
            return year + "年" + month + "月" + day + "日 " + h + ":" + m + ":" + s + "  " + getDay(day);
        } else return year + "年" + month + "月" + day + "日 " + h + ":" + m + ":" + s;
    }

    //获取公司消息
    function getEnterpriseInfo() {
        AsyncGet("${basePath}/recorder/getEnterpriseInfo", null, function (value) {
            $(".enterpriseName").text(value.enterpriseName);
            $(".enterpriseAddress").text(value.enterpriseAddress);
            $(".phone").text(value.phone);
        })
    }

    //获取会议消息
    function getMeetingInfo() {
        var meeting;
        SyncGet("${basePath}/function/getMeetingById", {id:${meetingId}}, function (value) {
            $(".meetingAbstract").val("  " + value.meetingAbstract);
            $(".meetingTitle").text("  " + value.title);
            $(".meetingStatus").text("  " + value.meetingStatus);
            if (value.status == 1 || value.status == 2) {
                startEnd = false;
                pauseRestart = false;
                $(".switch:first").bootstrapSwitch('toggleState');
                $(".switch:last").bootstrapSwitch('setActive', true);
                if (value.status == 2) {
                    $(".switch:last").bootstrapSwitch('toggleState');
                }
                startEnd = true;
                pauseRestart = true;
            } else $(".switch:last").bootstrapSwitch('setActive', false);
            meeting = value;
        })
        return meeting;
    }

    //获取设备消息
    function getDeviceInfo() {
        var device;
        SyncGet("${basePath}/recorder/getDeviceInfoByMeetingId", {id:${meetingId}}, function (value) {
            $(".deviceId").text(value.id);
            $(".deviceName").text(value.deviceName);
            $(".deviceStatus").text(value.deviceStatus);
            device = value;
        })
        return device;
    }

    //消息识别结果滚动条
    function scroll() {
        var height = 0;
        $(".content div").each(function () {
            height += $(this).outerHeight();
        });
        if (height > $(".content").height()) {
            $(".content").scrollTop(height - $(".content").height());
        }
    }

    //开始结束会议
    $(".switch:eq(0)").on('switch-change', function (e, data) {
        if (startEnd) {
            var value = data.value;
            if (value == false) {
                AsyncPost("${basePath}/recorder/startMeeting", {
                    id:${meetingId},
                    language: $("[name='language']").val()
                }, function (value) {
                    if (value.code == 0) {
                        $(".meetingStatus").text("  " + value.msg);
                        $(".switch:eq(1)").bootstrapSwitch('setActive', true);
                    } else {
                        ErrMessage(value.msg);
                        startEnd = false;
                        $(".switch:eq(0)").bootstrapSwitch('toggleState');
                        startEnd = true;
                    }
                })
            } else {
                AsyncPost("${basePath}/recorder/endMeeting", {id:${meetingId}}, function (value) {
                    if (value.code == 0) {
                        $(".meetingStatus").text("  " + value.msg);
                        $(".switch:eq(0)").bootstrapSwitch('setActive', false);
                        $(".switch:eq(1)").bootstrapSwitch('setActive', false);
                    } else {
                        ErrMessage(value.msg);
                        startEnd = false;
                        $(".switch:eq(0)").bootstrapSwitch('toggleState');
                        startEnd = true;
                    }
                })
            }
        }
    });
    //继续暂停会议
    $(".switch:eq(1)").on('switch-change', function (e, data) {
        if (pauseRestart) {
            var value = data.value;
            if (value == false) {
                AsyncPost("${basePath}/recorder/pauseMeeting", {id:${meetingId}}, function (value) {
                    if (value.code == 0) {
                        $(".meetingStatus").text("  " + value.msg);
                    } else {
                        ErrMessage(value.msg);
                        pauseRestart = false;
                        $(".switch:eq(1)").bootstrapSwitch('toggleState');
                        pauseRestart = true;
                    }
                })
            } else {
                AsyncPost("${basePath}/recorder/restartMeeting", {
                    id:${meetingId},
                    language: $("[name='language']").val()
                }, function (value) {
                    if (value.code == 0) {
                        $(".meetingStatus").text("  " + value.msg);
                    } else {
                        ErrMessage(value.msg);
                        pauseRestart = false;
                        $(".switch:eq(1)").bootstrapSwitch('toggleState');
                        pauseRestart = true;
                    }
                })
            }
        }
    });

    //修改会议摘要
    $(".meetingAbstract").next().click(function () {
        AsyncPost("${basePath}/function/updateMeetingAbstractById", {
            id:${meetingId},
            meetingAbstract: $(".meetingAbstract").val()
        }, function (value) {
            if (value.code == 0) {
                ShowMessage(value.msg);
            } else {
                ErrMessage(value.msg);
            }
        })
    })
    $(".addParticipate").click(function () {
        $("#EditEntity").modal("show");
        $("#EditEntity").find('.modal-title').text("选择会议参与人");
        $("#EditEntity .modal-body").load("${basePath}/function/searchPersonByName", function () {
            getParticipateListByName($("#EditEntity [name='username']").val());
        });
    })
    //选择会议参与人
    $("#EditEntity").on("click", "form .form-group:eq(1)>div", function () {
        $(this).toggleClass("active");
    });
    //确定会议参与人
    $("#EditEntity .modal-footer button:last").click(function () {
        $("#EditEntity form .form-group:eq(1) div.active").each(function () {
            var src = $(this).find("img").attr("src");
            var username = $(this).find("label").text();
            var img = $('<img  class="img-rounded" style="cursor: pointer;height:100%;"/>');
            img.attr("src", src).attr("username", username).attr("title", username);
            AsyncPost("${basePath}/recorder/addMeetingParticipator", {
                username: username,
                meetingId:${meetingId}
            }, function () {

            })
            usernameArray.push(username);
            $(".imgList").append(img);
        })
        $("#EditEntity").modal("hide");
    })

    //根据名称模糊查找会议参与人
    function getParticipateListByName(username) {
        var existName = "";
        $(".imgList img").each(function () {
            existName += $(this).attr("username") + ",";
        })
        AsyncGet("${basePath}/function/getParticipateListByName", {
            username: username,
            existName: existName
        }, function (value) {
            $("#EditEntity .form-group:eq(1)").empty();
            for (var i = 0; i < value.length; i++) {
                var div = $("<div style='cursor:pointer;height:62px;'></div>");
                var colsm4 = $("<div class='col-sm-4'></div>");
                var img = $("<img class='img-circle'>");
                img.attr("src", "${basePath}/function/getAvatar?avatar=" + value[i].avatar);
                colsm4.append(img);
                var label = $('<label class="col-sm-8 control-label"></label>');
                label.text(value[i].username);
                div.append(colsm4).append(label);
                $("#EditEntity .form-group:eq(1)").append(div);
            }
        })
    }

    //根据名称模糊查找会议参与人
    $("#EditEntity").on("keyup", "[name='username']", function () {
        getParticipateListByName($(this).val());
    })
    //标记发言人
    $(".imgList").on("click", "img", function () {
        $(this).addClass("active").siblings().removeClass("active");
    })
    //确认发言人
    $(".selectParticipate").click(function () {
        var speak = $(".imgList img.active");
        if (speak.length == 0) ErrMessage("请选择一位发言人");
        else {
            AsyncPost("${basePath}/recorder/speak/refresh", {
                username: speak.attr("username"),
                meetingId:${meetingId}}, function (value) {
                if (value.code != 0) {
                    ErrMessage(value.msg);
                } else {
                    speak.removeClass("active").addClass("speak").siblings().removeClass("speak");
                    $(this).attr("src", speak.attr("src"));
                }
            })
        }
    })


</script>

</body>
</html>